
    <template>
      <section class="content element-doc">
        <h2 id="button-an-niu"><a class="header-anchor" href="#button-an-niu">¶</a> Button 按钮</h2>
<p>常用的操作按钮。</p>
<h3 id="ji-chu-yong-fa"><a class="header-anchor" href="#ji-chu-yong-fa">¶</a> 基础用法</h3>
<p>基础的按钮用法。</p>
<demo-block>
        <div><p>使用<code>type</code>、<code>plain</code>、<code>round</code>和<code>circle</code>属性来定义 Button 的样式。</p>
</div>
        <template slot="source"><element-demo0 /></template>
        <template slot="highlight"><pre v-pre><code class="html">&lt;el-row&gt;
  &lt;el-button&gt;默认按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;primary&quot;&gt;主要按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;success&quot;&gt;成功按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;info&quot;&gt;信息按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;warning&quot;&gt;警告按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;danger&quot;&gt;危险按钮&lt;/el-button&gt;
&lt;/el-row&gt;

&lt;el-row&gt;
  &lt;el-button plain&gt;朴素按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;primary&quot; plain&gt;主要按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;success&quot; plain&gt;成功按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;info&quot; plain&gt;信息按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;warning&quot; plain&gt;警告按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;danger&quot; plain&gt;危险按钮&lt;/el-button&gt;
&lt;/el-row&gt;

&lt;el-row&gt;
  &lt;el-button round&gt;圆角按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;primary&quot; round&gt;主要按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;success&quot; round&gt;成功按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;info&quot; round&gt;信息按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;warning&quot; round&gt;警告按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;danger&quot; round&gt;危险按钮&lt;/el-button&gt;
&lt;/el-row&gt;

&lt;el-row&gt;
  &lt;el-button icon=&quot;el-icon-search&quot; circle&gt;&lt;/el-button&gt;
  &lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-edit&quot; circle&gt;&lt;/el-button&gt;
  &lt;el-button type=&quot;success&quot; icon=&quot;el-icon-check&quot; circle&gt;&lt;/el-button&gt;
  &lt;el-button type=&quot;info&quot; icon=&quot;el-icon-message&quot; circle&gt;&lt;/el-button&gt;
  &lt;el-button type=&quot;warning&quot; icon=&quot;el-icon-star-off&quot; circle&gt;&lt;/el-button&gt;
  &lt;el-button type=&quot;danger&quot; icon=&quot;el-icon-delete&quot; circle&gt;&lt;/el-button&gt;
&lt;/el-row&gt;
</code></pre></template></demo-block><h3 id="jin-yong-zhuang-tai"><a class="header-anchor" href="#jin-yong-zhuang-tai">¶</a> 禁用状态</h3>
<p>按钮不可用状态。</p>
<demo-block>
        <div><p>你可以使用<code>disabled</code>属性来定义按钮是否可用，它接受一个<code>Boolean</code>值。</p>
</div>
        <template slot="source"><element-demo1 /></template>
        <template slot="highlight"><pre v-pre><code class="html">&lt;el-row&gt;
  &lt;el-button disabled&gt;默认按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;primary&quot; disabled&gt;主要按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;success&quot; disabled&gt;成功按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;info&quot; disabled&gt;信息按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;warning&quot; disabled&gt;警告按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;danger&quot; disabled&gt;危险按钮&lt;/el-button&gt;
&lt;/el-row&gt;

&lt;el-row&gt;
  &lt;el-button plain disabled&gt;朴素按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;primary&quot; plain disabled&gt;主要按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;success&quot; plain disabled&gt;成功按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;info&quot; plain disabled&gt;信息按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;warning&quot; plain disabled&gt;警告按钮&lt;/el-button&gt;
  &lt;el-button type=&quot;danger&quot; plain disabled&gt;危险按钮&lt;/el-button&gt;
&lt;/el-row&gt;
</code></pre></template></demo-block><h3 id="wen-zi-an-niu"><a class="header-anchor" href="#wen-zi-an-niu">¶</a> 文字按钮</h3>
<p>没有边框和背景色的按钮。</p>
<demo-block>
        
        <template slot="source"><element-demo2 /></template>
        <template slot="highlight"><pre v-pre><code class="html">&lt;el-button type=&quot;text&quot;&gt;文字按钮&lt;/el-button&gt;
&lt;el-button type=&quot;text&quot; disabled&gt;文字按钮&lt;/el-button&gt;
</code></pre></template></demo-block><h3 id="tu-biao-an-niu"><a class="header-anchor" href="#tu-biao-an-niu">¶</a> 图标按钮</h3>
<p>带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。</p>
<demo-block>
        <div><p>设置<code>icon</code>属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用<code>i</code>标签即可，可以使用自定义图标。</p>
</div>
        <template slot="source"><element-demo3 /></template>
        <template slot="highlight"><pre v-pre><code class="html">&lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-edit&quot;&gt;&lt;/el-button&gt;
&lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-share&quot;&gt;&lt;/el-button&gt;
&lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-delete&quot;&gt;&lt;/el-button&gt;
&lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-search&quot;&gt;搜索&lt;/el-button&gt;
&lt;el-button type=&quot;primary&quot;&gt;上传&lt;i class=&quot;el-icon-upload el-icon--right&quot;&gt;&lt;/i&gt;&lt;/el-button&gt;
</code></pre></template></demo-block><h3 id="an-niu-zu"><a class="header-anchor" href="#an-niu-zu">¶</a> 按钮组</h3>
<p>以按钮组的方式出现，常用于多项类似操作。</p>
<demo-block>
        <div><p>使用<code>&lt;el-button-group&gt;</code>标签来嵌套你的按钮。</p>
</div>
        <template slot="source"><element-demo4 /></template>
        <template slot="highlight"><pre v-pre><code class="html">&lt;el-button-group&gt;
  &lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-arrow-left&quot;&gt;上一页&lt;/el-button&gt;
  &lt;el-button type=&quot;primary&quot;&gt;下一页&lt;i class=&quot;el-icon-arrow-right el-icon--right&quot;&gt;&lt;/i&gt;&lt;/el-button&gt;
&lt;/el-button-group&gt;
&lt;el-button-group&gt;
  &lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-edit&quot;&gt;&lt;/el-button&gt;
  &lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-share&quot;&gt;&lt;/el-button&gt;
  &lt;el-button type=&quot;primary&quot; icon=&quot;el-icon-delete&quot;&gt;&lt;/el-button&gt;
&lt;/el-button-group&gt;
</code></pre></template></demo-block><h3 id="jia-zai-zhong"><a class="header-anchor" href="#jia-zai-zhong">¶</a> 加载中</h3>
<p>点击按钮后进行数据加载操作，在按钮上显示加载状态。</p>
<demo-block>
        <div><p>要设置为 loading 状态，只要设置<code>loading</code>属性为<code>true</code>即可。</p>
</div>
        <template slot="source"><element-demo5 /></template>
        <template slot="highlight"><pre v-pre><code class="html">&lt;el-button type=&quot;primary&quot; :loading=&quot;true&quot;&gt;加载中&lt;/el-button&gt;
</code></pre></template></demo-block><h3 id="bu-tong-chi-cun"><a class="header-anchor" href="#bu-tong-chi-cun">¶</a> 不同尺寸</h3>
<p>Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。</p>
<demo-block>
        <div><p>额外的尺寸：<code>medium</code>、<code>small</code>、<code>mini</code>，通过设置<code>size</code>属性来配置它们。</p>
</div>
        <template slot="source"><element-demo6 /></template>
        <template slot="highlight"><pre v-pre><code class="html">&lt;el-row&gt;
  &lt;el-button&gt;默认按钮&lt;/el-button&gt;
  &lt;el-button size=&quot;medium&quot;&gt;中等按钮&lt;/el-button&gt;
  &lt;el-button size=&quot;small&quot;&gt;小型按钮&lt;/el-button&gt;
  &lt;el-button size=&quot;mini&quot;&gt;超小按钮&lt;/el-button&gt;
&lt;/el-row&gt;
&lt;el-row&gt;
  &lt;el-button round&gt;默认按钮&lt;/el-button&gt;
  &lt;el-button size=&quot;medium&quot; round&gt;中等按钮&lt;/el-button&gt;
  &lt;el-button size=&quot;small&quot; round&gt;小型按钮&lt;/el-button&gt;
  &lt;el-button size=&quot;mini&quot; round&gt;超小按钮&lt;/el-button&gt;
&lt;/el-row&gt;
</code></pre></template></demo-block><h3 id="attributes"><a class="header-anchor" href="#attributes">¶</a> Attributes</h3>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>size</td>
<td>尺寸</td>
<td>string</td>
<td>medium / small / mini</td>
<td>—</td>
</tr>
<tr>
<td>type</td>
<td>类型</td>
<td>string</td>
<td>primary / success / warning / danger / info / text</td>
<td>—</td>
</tr>
<tr>
<td>plain</td>
<td>是否朴素按钮</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>round</td>
<td>是否圆角按钮</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>circle</td>
<td>是否圆形按钮</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>loading</td>
<td>是否加载中状态</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>disabled</td>
<td>是否禁用状态</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>icon</td>
<td>图标类名</td>
<td>string</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>autofocus</td>
<td>是否默认聚焦</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>native-type</td>
<td>原生 type 属性</td>
<td>string</td>
<td>button / submit / reset</td>
<td>button</td>
</tr>
</tbody>
</table>

      </section>
    </template>
    <script>
      export default {
        name: 'component-doc',
        components: {
          "element-demo0": (function() {
    
    var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c(
        "el-row",
        [
          _c("el-button", [_vm._v("默认按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "primary" } }, [_vm._v("主要按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "success" } }, [_vm._v("成功按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "info" } }, [_vm._v("信息按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "warning" } }, [_vm._v("警告按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "danger" } }, [_vm._v("危险按钮")])
        ],
        1
      ),
      _vm._v(" "),
      _c(
        "el-row",
        [
          _c("el-button", { attrs: { plain: "" } }, [_vm._v("朴素按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "primary", plain: "" } }, [
            _vm._v("主要按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "success", plain: "" } }, [
            _vm._v("成功按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "info", plain: "" } }, [
            _vm._v("信息按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "warning", plain: "" } }, [
            _vm._v("警告按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "danger", plain: "" } }, [
            _vm._v("危险按钮")
          ])
        ],
        1
      ),
      _vm._v(" "),
      _c(
        "el-row",
        [
          _c("el-button", { attrs: { round: "" } }, [_vm._v("圆角按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "primary", round: "" } }, [
            _vm._v("主要按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "success", round: "" } }, [
            _vm._v("成功按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "info", round: "" } }, [
            _vm._v("信息按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "warning", round: "" } }, [
            _vm._v("警告按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "danger", round: "" } }, [
            _vm._v("危险按钮")
          ])
        ],
        1
      ),
      _vm._v(" "),
      _c(
        "el-row",
        [
          _c("el-button", { attrs: { icon: "el-icon-search", circle: "" } }),
          _vm._v(" "),
          _c("el-button", {
            attrs: { type: "primary", icon: "el-icon-edit", circle: "" }
          }),
          _vm._v(" "),
          _c("el-button", {
            attrs: { type: "success", icon: "el-icon-check", circle: "" }
          }),
          _vm._v(" "),
          _c("el-button", {
            attrs: { type: "info", icon: "el-icon-message", circle: "" }
          }),
          _vm._v(" "),
          _c("el-button", {
            attrs: { type: "warning", icon: "el-icon-star-off", circle: "" }
          }),
          _vm._v(" "),
          _c("el-button", {
            attrs: { type: "danger", icon: "el-icon-delete", circle: "" }
          })
        ],
        1
      )
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

  
    const democomponentExport = {}
    return {
      render,
      staticRenderFns,
      ...democomponentExport
    }
  })(),"element-demo1": (function() {
    
    var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c(
        "el-row",
        [
          _c("el-button", { attrs: { disabled: "" } }, [_vm._v("默认按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "primary", disabled: "" } }, [
            _vm._v("主要按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "success", disabled: "" } }, [
            _vm._v("成功按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "info", disabled: "" } }, [
            _vm._v("信息按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "warning", disabled: "" } }, [
            _vm._v("警告按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "danger", disabled: "" } }, [
            _vm._v("危险按钮")
          ])
        ],
        1
      ),
      _vm._v(" "),
      _c(
        "el-row",
        [
          _c("el-button", { attrs: { plain: "", disabled: "" } }, [
            _vm._v("朴素按钮")
          ]),
          _vm._v(" "),
          _c(
            "el-button",
            { attrs: { type: "primary", plain: "", disabled: "" } },
            [_vm._v("主要按钮")]
          ),
          _vm._v(" "),
          _c(
            "el-button",
            { attrs: { type: "success", plain: "", disabled: "" } },
            [_vm._v("成功按钮")]
          ),
          _vm._v(" "),
          _c(
            "el-button",
            { attrs: { type: "info", plain: "", disabled: "" } },
            [_vm._v("信息按钮")]
          ),
          _vm._v(" "),
          _c(
            "el-button",
            { attrs: { type: "warning", plain: "", disabled: "" } },
            [_vm._v("警告按钮")]
          ),
          _vm._v(" "),
          _c(
            "el-button",
            { attrs: { type: "danger", plain: "", disabled: "" } },
            [_vm._v("危险按钮")]
          )
        ],
        1
      )
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

  
    const democomponentExport = {}
    return {
      render,
      staticRenderFns,
      ...democomponentExport
    }
  })(),"element-demo2": (function() {
    
    var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c("el-button", { attrs: { type: "text" } }, [_vm._v("文字按钮")]),
      _vm._v(" "),
      _c("el-button", { attrs: { type: "text", disabled: "" } }, [
        _vm._v("文字按钮")
      ])
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

  
    const democomponentExport = {}
    return {
      render,
      staticRenderFns,
      ...democomponentExport
    }
  })(),"element-demo3": (function() {
    
    var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c("el-button", { attrs: { type: "primary", icon: "el-icon-edit" } }),
      _vm._v(" "),
      _c("el-button", { attrs: { type: "primary", icon: "el-icon-share" } }),
      _vm._v(" "),
      _c("el-button", { attrs: { type: "primary", icon: "el-icon-delete" } }),
      _vm._v(" "),
      _c("el-button", { attrs: { type: "primary", icon: "el-icon-search" } }, [
        _vm._v("搜索")
      ]),
      _vm._v(" "),
      _c("el-button", { attrs: { type: "primary" } }, [
        _vm._v("上传"),
        _c("i", { staticClass: "el-icon-upload el-icon--right" })
      ])
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

  
    const democomponentExport = {}
    return {
      render,
      staticRenderFns,
      ...democomponentExport
    }
  })(),"element-demo4": (function() {
    
    var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c(
        "el-button-group",
        [
          _c(
            "el-button",
            { attrs: { type: "primary", icon: "el-icon-arrow-left" } },
            [_vm._v("上一页")]
          ),
          _vm._v(" "),
          _c("el-button", { attrs: { type: "primary" } }, [
            _vm._v("下一页"),
            _c("i", { staticClass: "el-icon-arrow-right el-icon--right" })
          ])
        ],
        1
      ),
      _vm._v(" "),
      _c(
        "el-button-group",
        [
          _c("el-button", { attrs: { type: "primary", icon: "el-icon-edit" } }),
          _vm._v(" "),
          _c("el-button", {
            attrs: { type: "primary", icon: "el-icon-share" }
          }),
          _vm._v(" "),
          _c("el-button", {
            attrs: { type: "primary", icon: "el-icon-delete" }
          })
        ],
        1
      )
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

  
    const democomponentExport = {}
    return {
      render,
      staticRenderFns,
      ...democomponentExport
    }
  })(),"element-demo5": (function() {
    
    var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c("el-button", { attrs: { type: "primary", loading: true } }, [
        _vm._v("加载中")
      ])
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

  
    const democomponentExport = {}
    return {
      render,
      staticRenderFns,
      ...democomponentExport
    }
  })(),"element-demo6": (function() {
    
    var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c(
        "el-row",
        [
          _c("el-button", [_vm._v("默认按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { size: "medium" } }, [_vm._v("中等按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { size: "small" } }, [_vm._v("小型按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { size: "mini" } }, [_vm._v("超小按钮")])
        ],
        1
      ),
      _vm._v(" "),
      _c(
        "el-row",
        [
          _c("el-button", { attrs: { round: "" } }, [_vm._v("默认按钮")]),
          _vm._v(" "),
          _c("el-button", { attrs: { size: "medium", round: "" } }, [
            _vm._v("中等按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { size: "small", round: "" } }, [
            _vm._v("小型按钮")
          ]),
          _vm._v(" "),
          _c("el-button", { attrs: { size: "mini", round: "" } }, [
            _vm._v("超小按钮")
          ])
        ],
        1
      )
    ],
    1
  )
}
var staticRenderFns = []
render._withStripped = true

  
    const democomponentExport = {}
    return {
      render,
      staticRenderFns,
      ...democomponentExport
    }
  })(),
        }
      }
    </script>
  